<template>
    <el-sub-menu index="6">
        <template #title>工具箱</template>
        <el-menu-item index="6-1" @click="getLineStringLength"
            >测量距离</el-menu-item
        >
        <el-menu-item index="6-2" @click="getPolygonArea"
            >测量面积</el-menu-item
        >
        <el-menu-item index="6-3" @click="clearDraw">关闭测量</el-menu-item>
        <el-menu-item index="6-4" @click="exportImage">导出图片</el-menu-item>
    </el-sub-menu>
    <div
        id="tools-popup"
        class="ol-popup"
        :style="{ display: popupText ? 'block' : 'none' }"
    >
        <a
            href="javascript:void(0)"
            @click="clearDraw"
            class="ol-popup-closer"
        ></a>
        {{ popupText }}
    </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref } from "vue";
import { createPopup } from "@/api/ol-api/popup";
import { FeatureToJson } from "@/api/ol-api/index";
//file-saver
import { saveAs } from "file-saver";
import * as turf from "@turf/turf";
import { ElMessage } from "element-plus";
let popup = null;
let popupText = ref(null);
//事件查询popup弹窗数据
const popupData = ref(null);
/**
 * 设置popup弹窗内容
 * @param {string} text 弹窗内容(可以是HTML字符串)
 * @param {Array} coordinate 弹窗位置(例:[114.30,30.50])
 */
const setPopup = (text, data = {}, coordinate) => {
    // 设置弹出窗口的内容
    popupText.value = text;
    popupData.value = data;
    // 设置弹出窗口的位置
    popup.setPosition(coordinate);
};
//获取当前实例
const { proxy } = getCurrentInstance();
/* 创建线图层 */
const line_source = new ol.source.Vector({
    features: [],
});
const line_layer = new ol.layer.Vector({
    source: line_source,
    zIndex: 9999,
});
/* 创建线画笔 */
let drawLine = new ol.interaction.Draw({
    type: "LineString",
    source: line_source,
});
/* 监听线画笔 */
drawLine.on("drawend", (evt) => {
    const line = FeatureToJson(evt.feature);
    const coordinate = line.geometry.coordinates.slice(-1)[0];
    const length = turf.length(line).toFixed(3);
    setPopup(`当前线段长度为：\n${length}千米`, null, coordinate);
});

/* 创建面图层 */
const polygon_source = new ol.source.Vector({
    features: [],
});
const polygon_layer = new ol.layer.Vector({
    source: polygon_source,
    zIndex: 9999,
});
/* 创建面画笔 */
let drawArea = new ol.interaction.Draw({
    type: "Polygon",
    source: polygon_source,
});
/* 监听面画笔 */
drawArea.on("drawend", (evt) => {
    const polygon = FeatureToJson(evt.feature);
    const center = turf.centerOfMass(polygon).geometry.coordinates;
    const area = (turf.area(polygon) / 1000000).toFixed(3);
    setPopup(`当前面积为：\n${area}平方千米`, null, center);
});

//线段测量
const getLineStringLength = () => {
    const map = proxy.$map;
    //清除之前的交互
    map.getInteractions().pop();
    map.addInteraction(drawLine);
};
//面积测量
const getPolygonArea = () => {
    const map = proxy.$map;
    //清除之前的交互
    map.getInteractions().pop();
    map.addInteraction(drawArea);
};
//关闭测量
const clearDraw = () => {
    const map = proxy.$map;
    //清空数据源
    line_source.clear();
    polygon_source.clear();
    //隐藏弹窗
    popupText.value = "";
    //清除交互
    map.getInteractions().pop();
    //关闭弹窗
    popup.setPosition(undefined);
};
//导出图片
const exportImage = () => {
    const map = proxy.$map;
    try {
        map.once("postcompose", function (event) {
            const canvas = event.context.canvas;
            canvas.toBlob(function (blob) {
                saveAs(blob, "map.png");
            });
        });
        map.renderSync();
    } catch (error) {
        ElMessage.error("导出图片时发生错误:", error);
    }
};

onMounted(() => {
    //获取地图对象
    const map = proxy.$map;
    //设置弹窗
    const container = document.querySelector("#tools-popup");
    // 创建一个空的 Overlay 作为弹出窗口容器
    popup = createPopup({ container, map });
    //添加弹窗到地图中
    map.addOverlay(popup);
    //添加绘图图层
    map.addLayer(line_layer);
    map.addLayer(polygon_layer);
});
</script>

<style scoped>
.ol-popup {
    width: 180px;
    box-sizing: border-box;
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 100px;
    z-index: 100;
}

.ol-popup:after,
.ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 50%;
    transform: translateX(-50%);
}

.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}

.ol-popup-closer:after {
    content: "✖";
}

#popup-content {
    font-size: 14px;
    font-family: "微软雅黑";
}

#popup-content .markerInfo {
    font-weight: bold;
}
</style>
